﻿
@{
    ViewBag.Title = "List";
    Layout = "~/Views/Shared/_Layout.cshtml";

}

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>商品属性展示</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                    <li class="breadcrumb-item active">商品分类</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-info">

                <button id="alertAddModal" class="btn btn-primary">添加</button>

                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="table" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info " style="width: 100%;">
                                <thead>
                                    <tr role="row">

                                        <th>序号</th>
                                        <th>属性名称</th>
                                        <th>录入方式</th>
                                        <th>排序号</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->

            </div>
            <!-- /.card -->
        </div>
    </div>
    <div class="modal fade" id="add-modal" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="add-modal-title">属性添加</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="Name" class="col-sm-3 col-form-label">属性名称:</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="AttrName" name="Name" placeholder="请输入属性名称">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="Name" class="col-sm-3 col-form-label">录入方式:</label>
                        <div class="col-sm-9">
                            <div class="icheck-primary">
                                <input type="radio" id="r1" name="enterType" checked="" value="1">
                                <label for="r1" style="font-weight:normal">
                                    手动录入
                                </label>
                                <div class="icheck-primary">
                                    <input id="r2" type="radio" name="enterType" value="2">
                                    <label for="r2" style="font-weight:normal">
                                        下拉选择
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="Name" class="col-sm-3 col-form-label">属性值:</label>
                        <div class="col-sm-9" id="attrValues">
                            <div class="row">
                                <button id="addAttrValue" class="btn btn-sm btn-primary">点击添加</button>

                            </div>
                            <!-- <div class="row" style="margin-top:10px">
                                 <div class="col-sm-8">
                                     <input type="text" class="form-control">

                                 </div>
                                 <div class="col-sm-4">
                                     <button onclick="delAttrValue(this)" class="btn btn-sm btn-primary">删除</button>

                                 </div>
                             </div>-->
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="Name" class="col-sm-3 col-form-label">排序号:</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="OrderNum" name="Name" placeholder="请输入排序号">
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" id="btnOK" class="btn btn-primary">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="del-modal" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">提示框</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>是否确定删除</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">否</button>
                    <button type="button" class="btn btn-primary" onclick="del()">是</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</section>
@section js{
    <script>
        var delID = null;
        function alertDelModel(id) {

            delID = id;
            $("#del-modal").modal();
        }
        function del() {
            if (!delID) {
                return;
            }
            $.ajax({
                type: "POST",
                url: "/ProductAttrKey/Delete",
                cache: false,//禁用或缓存
                data: { id: delID },//传入组装的参数
                dataType: "json",
                success: function (result) {
                    if (result.State) {
                        toastr.success('删除成功')
                        $("#del-modal").modal("hide");
                        //刷新datatables
                        $('#table').DataTable().ajax.reload();
                    } else {
                        toastr.error('删除失败')
                    }
                }
            });
        }
        //侯海啸
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        var editId; 
        var opreateFlag = 1;


        function delAttrValue(obj) {
            $(obj).parent().parent().remove();
        }
       
        function alertDelModal(id) {
            
        }
        function alertEditModal(id) {
            
            //侯海啸
            editId = id;
            opreateFlag = 2;
            $("#add-modal").modal()
            $("#add-modal-title").text("属性修改")
            $.ajax({
                type: "GET",
                url: "../ProductAttrKey/GetOne",
                cache: false,
                data: { id: id},
                dataType: "json",
                success: function (result) {
                     $("#AttrName").val(result.attrKey.AttrName);
                    $("#OrderNum").val(result.attrKey.OrderNum);
                    $("input[name='enterType'][value=" + result.attrKey.EnterType + "]").prop("checked", true);
                    $('#attrValues div:gt(1)').remove();
                    result.attrValue.map(function (v) {
                        $("#attrValues").append("<div class=\"row\" style=\"margin-top:10px\"><div class= \"col-sm-8\"><input value=" + v.AttrValue + " type=\"text\" class=\"form-control\"></div><div class=\"col-sm-4\"><button onclick=\"delAttrValue(this)\" class=\"btn btn-sm btn-primary\">删除</button></div></div >");

                    })
                }

            });
        }
        $(function () {
            $("#btnOK").click(function () {
                var AttrName = $("#AttrName").val();
                var OrderNum = $("#OrderNum").val();
                var EnterType = $("input[name='enterType']:checked").val();
                var attrValues = [];
                $("#attrValues input").each(function () {
                    attrValues.push($(this).val());
                });
                var ProductCategoryID = $.getUrlParam('id');
                var data = {
                    AttrName: AttrName,
                    OrderNum: OrderNum,
                    EnterType: EnterType,
                    AttrValues: attrValues,
                    ProductCategoryID: ProductCategoryID
                }
                var url = "/ProductAttrKey/Add"
                if (opreateFlag == 2) {
                    data.ID = editId;
                    url = "/ProductAttrKey/Edit"
                }
                $.ajax({
                    url: url,
                    type: "POST",
                    dateType: "json",
                    data: JSON.stringify(data),
                    contentType:"application/json;charset=utf-8",
                    success: function (result) {
                        if (result.state) {

                            toastr.success(result.msg)

                            
                            $("#table").DataTable().ajax.reload();
                        } else {
                            toastr.error(result.msg)

                        }
                    },
                    error: function (result) {
                        if (opreateFlag == 2) {
                            toastr.success('修改失败')

                        } else {
                            toastr.success('添加失败')

                        }

                    }

                })
            })
            $("#alertAddModal").click(function () {
                opreateFlag = 1;
                $("#add-modal").modal()
                $("#add-modal-title").text("属性添加")
                $("#AttrName").val("");
                $("#OrderNum").val("");
                $("input[name='enterType'][value=1]").prop("checked", true);
                $('#attrValues div:gt(1)').remove();

            })
            $("#addAttrValue").click(function () {
                //$("#attrValues").append(1);
                $("#attrValues").append("<div class=\"row\" style=\"margin-top:10px\"><div class= \"col-sm-8\"><input type=\"text\" class=\"form-control\"></div><div class=\"col-sm-4\"><button onclick=\"delAttrValue(this)\" class=\"btn btn-sm btn-primary\">删除</button></div></div >");

            })
            //侯海啸
           $("#table").DataTable({
                "lengthchange": false,
                "searching": false,
                "ordering": false,
                "info": false,
                "paging": false,
                "autoWidth": true,
                "processing": true,
                "language": {
                    "processing": "请求数据中...",
                    "zeroRecords": "没有数据"
                },
               
                "serverSide": true,
                "ajax": function (data, callback, settings) {
                    var param = {};
                    param.draw = data.draw;
                    param.categoryId = $.getUrlParam('id');
                    $.ajax({
                        type: "POST",
                        url: "../ProductAttrKey/GetByCategoryID",
                        cache: false,
                        data: param,
                        dataType: "json",
                        success: function (result) {
                            setTimeout(function () {
                                callback(result);
                            }, 500);
                        }

                    });
                },
                columns: [
                   //侯海啸
                    { "data": "ID" },
                    { "data": "AttrName" },
                    {
                        "data": function (data) {
                            if (data.EnterType == "1") {
                                return "手工录入";
                            } else if (data.EnterType == "2") {
                                return "下拉选择";
                            }
                        }
                        
                    },
                    { "data": "OrderNum" },
                    
                    {
                        "data": function (data) {

                            var html = "<button  onclick=\"alertEditModal(" + data.ID + ");\" class = \"btn btn-sm btn-primary\">编辑</button>";
                            html += "&nbsp;&nbsp;";
                            html += "<button type =\"button\" onclick=\"alertDelModel(" + data.ID + ");\"  class = \"del btn btn-sm btn-danger\">删除</button>";
                            return html;
                        }
                    },

                ]
            });

            
        });
    </script>
}


